<script setup>
import { useRouter } from 'vue-router'
const router=useRouter();
const logout=function(){
    sessionStorage.setItem("tk","");
    setTimeout(function () { router.push({ path: '/login' }); }, 100);
}
</script>
<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    router="true">
                    <el-menu-item index="1" route="attracts">
                        <el-icon><House /></el-icon>
                        <span>设备管理</span>
                    </el-menu-item>
                    <!-- <el-menu-item index="2" route="employee">
                        <el-icon><icon-menu /></el-icon>
                        <span>员工列表</span>
                    </el-menu-item> -->
                    <el-menu-item index="2" route="atype">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <span>设施类型</span>
                    </el-menu-item>
                    <el-menu-item index="3" route="tickets">
                        <el-icon><PriceTag /></el-icon>
                        <span>票务定价</span>
                    </el-menu-item>
                    <el-menu-item index="4" route="ttype">
                        <el-icon><Discount /></el-icon>
                        <span>折扣类型</span>
                    </el-menu-item>
                    <el-menu-item index="5" route="ticketsservice">
                        <el-icon><Memo /></el-icon>
                        <span>票据服务提供表</span>
                    </el-menu-item>
                    <el-menu-item index="6" route="ticketsrecords">
                        <el-icon><Tickets /></el-icon>
                        <span>票务记录</span>
                    </el-menu-item>
                    <el-menu-item index="7" route="chart">
                        <el-icon><PieChart /></el-icon>
                        <span>统计图表</span>
                    </el-menu-item>
                    <el-menu-item index="8" route="manager">
                        <el-icon><User /></el-icon>
                        <span>管理员列表</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header style="display: flex; justify-content: space-between; align-items: center; font-size: 20px;">
                    <h1
                        style="font-size: 32px; font-weight: bold; color: #3c8dbc; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);">
                        游乐园票务管理系统
                    </h1>
                    <div class="toolbar" style="font-size: 18px;">
                        <el-button type="primary" @click="logout">
                            退出登录<el-icon class="el-icon--right">
                                <SwitchButton />
                            </el-icon>
                        </el-button>
                    </div>
                </el-header>
                <el-main><router-view></router-view></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style>
.el-aside {
  background-color: rgba(255, 255, 255, 0.0); /* 设置侧边栏背景透明度 */
}
.el-main {
  background-color: rgba(255, 255, 255, 0.0); /* 设置表格背景透明度 */
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 12px;
}

.header-title {
    font-size: 20px;
    font-weight: bold;
    flex: 1;
    text-align: center;
}

.header-tools {
    display: flex;
    align-items: center;
}

.toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>